<!--
  @Descripttion:：简历编辑
  @Author：yejianbo
  @Date：2022年05月22日 03:06:59
-->
<template>
  <div>
    <section class="resume-review">
      <div class="nav-com">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="margin-bottom: 20px"
        >
          <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'userCenter' }">
            用户中心
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span style="color: #3d6cb0">{{ $route.meta.title || "--" }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div
        style="
          height: 36px;
          font-size: 25px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #37383d;
          line-height: 36px;
          margin-bottom: 27px;
        "
      >
        我的简历
      </div>
      <el-form ref="form" label-width="150px" label-position="left">
        <!-- 联系方式 -->
        <section class="block pt30">
          <div class="title">
            联系方式 <span class="en">Contact Information</span>
          </div>
          <div class="contact">
            <el-row>
              <el-col :span="17" :offset="7">
                <div class="row1">
                  <span>手机号码</span>
                  <span>{{ userInfo.mobile }}</span>
                </div>
              </el-col>
              <el-col :span="17" :offset="7">
                <div class="row1">
                  <span>邮箱地址</span>
                  <span>{{ userInfo.email }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </section>
        <!-- 个人信息 -->
        <section class="block pt30">
          <div class="title">
            个人信息 <span class="en">Personal Information</span>
          </div>
          <div class="user-info">
            <img
              v-if="userInfo.studentPictureUrl"
              class="touxiang"
              :src="userInfo.studentPictureUrl"
              alt="用户头像"
            >
            <img
              v-else
              class="touxiang"
              src="../../../assets/images/touxiang1.png"
              alt="用户头像"
            >
            <div class="row1">{{ userInfo.nickname }}</div>
            <div class="row2">
              {{ userInfo.sex }}<span class="line" />{{ userInfo.age
              }}<span class="line" />{{ userInfo.liveCity
              }}<span class="line" />{{ userInfo.clan }}<span class="line" />{{
                userInfo.political
              }}
            </div>
          </div>
        </section>
        <!-- 求职状态 -->
        <section class="block pt30">
          <p class="title">求职状态</p>
          <div class="job-wish-item">
            <div class="row1">
              {{ (userInfo.jobStatus || '--') + "/" + (userInfo.inJobTime || '--') }}
            </div>
          </div>
        </section>
        
        <!-- 切换简历模块 -->
        <!-- <div class="changeRow">
          <div class="items" 
          @click="changeIndex(item)" v-for="(item, index) in curriculumList" 
          :key="index" :class="(currentCurriculumId == item.id?'active':'')">
            <span>{{(item.name || `模板${index+1}`)}}</span>
          </div>
          <div class="items adds" v-if="(curriculumList.length<5)&&currentCurriculumId" @click="addFun(curriculumList.length)">
            <i class="el-icon-plus" style="margin-right: 10px;"></i>添加模板
          </div>
        </div> -->
        
        <!-- 模板名称 -->
        <section class="block pt30">
          <div class="title">
            简历名称 <span class="isRequire">*必填</span
            ><span class="en">Resume Name</span>
          </div>
          <el-input v-model="name" placeholder="请输入简历名称" maxlength="20" style="width: 180px;"></el-input>
        </section>
        <!-- 求职/实习意向 -->
        <section class="block pt30">
          <div class="title">
            求职/实习意向 <span class="isRequire">*必填</span><span class="en">Job Preferences</span>
            <div
              v-if="!internshipDesireFlag && internshipDesire.length > 0"
              class="add-btn"
              @click="editFun('internshipDesire')"
            >
              + 添加求职意向
            </div>
          </div>
          <div
            v-if="internshipDesire.length <= 0 && !internshipDesireFlag"
            class="empty-btn"
            @click="editFun('internshipDesire')"
          >
            <el-row>
              <el-col> <i class="add-icon" />添加求职意向 </el-col>
            </el-row>
          </div>
          <div
            v-for="(item, index) in internshipDesire"
            v-show="!internshipDesireFlag"
            :key="index"
            class="job-wish-item"
          >
            <div class="row1">{{ item.jobName }}</div>
            <div class="row4">
              <span class="label">薪资要求：</span><span
                class="value"
              >{{ item.lowestSalary }}-{{ item.highestSalary }}元</span>
              <span class="label">期望城市：</span><span class="value">{{ item.targetCity }}</span>
            </div>
            <div class="row4">
              <span class="label">期望行业：</span>
              <span
                v-for="(it, i) in item.expectedIndustry"
                v-if="it"
                class="value"
              >{{ it }}
              </span>
            </div>
            <div
              class="edit-btn top0"
              type="text"
              @click="editFun('internshipDesire', item, index)"
            >
              <i class="edit-icon" /> 编辑
            </div>
          </div>
          <InternshipDesire
            v-show="internshipDesireFlag"
            ref="internshipDesire"
          />
        </section>
        <!-- 教育经历 -->
        <section class="block pt30">
          <div class="title">
            教育经历<span class="isRequire">*必填</span><span class="en">Educaiton</span>
            <div
              v-if="
                !educationalExperienceFlag && educationalExperience.length > 0
              "
              class="add-btn"
              @click="editFun('educationalExperience')"
            >
              + 添加教育经历
            </div>
          </div>
          <div
            v-if="
              educationalExperience.length <= 0 && !educationalExperienceFlag
            "
            class="empty-btn"
            @click="editFun('educationalExperience')"
          >
            <el-row>
              <el-col> <i class="add-icon" />添加教育经历 </el-col>
            </el-row>
          </div>
          <div v-if="!educationalExperienceFlag" class="word-record-item">
            <div v-for="(item, index) in educationalExperience" class="educate">
              {{ item.schoolName
              }}<span class="info">{{ item.educationalBackground }}</span><span class="info">{{ item.major }}</span><span class="info">
                {{ ["无", "有"][item.diploma] }}学位证书</span><span class="info">{{
                item.intakeTime + "~" + item.graduateTime
              }}</span>
              <div
                class="edit-btn"
                type="text"
                @click="editFun('educationalExperience', item, index)"
              >
                <i class="edit-icon" /> 编辑
              </div>
            </div>
          </div>
          <EducationalExperience
            v-show="educationalExperienceFlag"
            ref="educationalExperience"
          />
        </section>
        <!-- 工作/实习经历 -->
        <section class="block pt30">
          <div class="title">
            工作/实习经历<span class="en">Work Experience/Internship</span>
            <div
              v-if="!workExperienceFlag && workExperience.length > 0"
              class="add-btn"
              @click="editFun('workExperience')"
            >
              + 工作/实习经历
            </div>
          </div>
          <div
            v-if="workExperience.length <= 0 && !workExperienceFlag"
            class="empty-btn"
            @click="editFun('workExperience')"
          >
            <el-row>
              <el-col> <i class="add-icon" />添加工作/实习经历 </el-col>
            </el-row>
          </div>
          <div
            v-for="(item, index) in workExperience"
            v-if="!workExperienceFlag"
            :key="index"
            class="job-wish-item"
          >
            <div class="row1">{{ item.companyName }}</div>
            <div class="row4">
              <span
                class="value"
              >{{ item.entryTime }}~{{ item.resignationTime }}</span>
            </div>
            <div class="row4">
              <span class="label">{{ item.jobName }}</span>
              <span class="value">{{ ["实习", "全职"][item.jobType] }}</span>
            </div>
            <div
              v-if="item.jobDescription"
              class="row4"
              v-html="item.jobDescription.replace(/\n/gm, '<br>')"
            />
            <div
              class="edit-btn top0"
              type="text"
              @click="editFun('workExperience', item, index)"
            >
              <i class="edit-icon" /> 编辑
            </div>
          </div>
          <WorkExperience v-show="workExperienceFlag" ref="workExperience" />
        </section>
        <!-- 项目经历 -->
        <section class="block pt30">
          <div class="title">
            项目经历<span class="en">Projects Experience</span>
            <div
              v-if="!projectExperienceFlag && projectExperience.length > 0"
              class="add-btn"
              @click="editFun('projectExperience')"
            >
              + 添加项目经历
            </div>
          </div>
          <div
            v-if="projectExperience.length <= 0 && !projectExperienceFlag"
            class="empty-btn"
            @click="editFun('projectExperience')"
          >
            <el-row>
              <el-col> <i class="add-icon" />添加项目经历 </el-col>
            </el-row>
          </div>
          <div
            v-for="(item, index) in projectExperience"
            v-if="!projectExperienceFlag"
            :key="index"
            class="job-wish-item"
          >
            <div class="row1">{{ item.projectName }}</div>
            <div class="row4">
              <span class="value">{{ item.beginTime }}~{{ item.endTime }}</span>
            </div>
            <div
              v-if="item.projectDescription"
              class="row4"
              v-html="item.projectDescription.replace(/\n/gm, '<br>')"
            />
            <div
              class="edit-btn top0"
              type="text"
              @click="editFun('projectExperience', item, index)"
            >
              <i class="edit-icon" /> 编辑
            </div>
          </div>
          <ProjectExperience
            v-show="projectExperienceFlag"
            ref="projectExperience"
          />
        </section>
        <!-- 语言能力 -->
        <section class="block pt30">
          <div class="title">
            语言能力<span class="en">Languages Level</span>
            <div
              v-if="!languageAbilityFlag && languageAbility.length > 0"
              class="add-btn"
              @click="editFun('languageAbility')"
            >
              + 添加语言能力
            </div>
          </div>
          <div
            v-if="languageAbility.length <= 0 && !languageAbilityFlag"
            class="empty-btn"
            @click="editFun('languageAbility')"
          >
            <el-row>
              <el-col> <i class="add-icon" />添加语言能力 </el-col>
            </el-row>
          </div>
          <div v-if="!languageAbilityFlag" class="word-record-item">
            <div
              v-for="(item, index) in languageAbility"
              :key="index"
              class="educate"
            >
              {{ item.languageName }}<span class="info">{{ item.level }}</span>
              <div
                class="edit-btn"
                type="text"
                @click="editFun('languageAbility', item, index)"
              >
                <i class="edit-icon" /> 编辑
              </div>
            </div>
          </div>
          <LanguageAbility v-show="languageAbilityFlag" ref="languageAbility" />
        </section>
        <!-- 专业技能 -->
        <section class="block pt30">
          <div class="title">
            专业技能<span class="en">Skill</span>
            <div
              v-if="!specialtyAbilityFlag && specialtyAbility.length > 0"
              class="add-btn"
              @click="editFun('specialtyAbility')"
            >
              + 添加专业技能
            </div>
          </div>
          <div
            v-if="specialtyAbility.length <= 0 && !specialtyAbilityFlag"
            class="empty-btn"
            @click="editFun('specialtyAbility')"
          >
            <el-row>
              <el-col> <i class="add-icon" />添加专业技能 </el-col>
            </el-row>
          </div>
          <div v-if="!specialtyAbilityFlag" class="word-record-item">
            <div v-for="(item, index) in specialtyAbility" class="educate">
              {{ item.specialtyName }}<span class="info">{{ item.level }}</span>
              <div
                class="edit-btn"
                type="text"
                @click="editFun('specialtyAbility', item, index)"
              >
                <i class="edit-icon" /> 编辑
              </div>
            </div>
          </div>
          <SpecialtyAbility
            v-show="specialtyAbilityFlag"
            ref="specialtyAbility"
          />
        </section>
        <!-- 证书 -->
        <section class="block pt30">
          <div class="title">
            证书<span class="en">Certification</span>
            <div
              v-if="!certificatesFlag && certificates.length > 0"
              class="add-btn"
              @click="editFun('certificates')"
            >
              + 添加证书
            </div>
          </div>
          <div
            v-if="certificates.length <= 0 && !certificatesFlag"
            class="empty-btn"
            @click="editFun('certificates')"
          >
            <el-row>
              <el-col> <i class="add-icon" />添加证书 </el-col>
            </el-row>
          </div>
          <div v-if="!certificatesFlag" class="word-record-item">
            <div v-for="(item, index) in certificates" class="educate">
              {{ item.certificatesName
              }}<span class="info">{{ item.time }}</span>
              <div
                class="edit-btn"
                type="text"
                @click="editFun('certificates', item, index)"
              >
                <i class="edit-icon" /> 编辑
              </div>
            </div>
          </div>
          <Certificates v-show="certificatesFlag" ref="certificates" />
        </section>
        <!-- 已修课程 -->
        <section class="block pt30">
          <div class="title">
            已修课程<span class="en">Course Completed</span>
            <div
              v-if="!coursesFlag && courses.length > 0"
              class="add-btn"
              @click="editFun('courses')"
            >
              + 添加课程
            </div>
          </div>
          <div
            v-if="courses.length <= 0 && !coursesFlag"
            class="empty-btn"
            @click="editFun('courses')"
          >
            <el-row>
              <el-col> <i class="add-icon" />添加已修课程 </el-col>
            </el-row>
          </div>
          <div v-if="!coursesFlag" class="word-record-item">
            <div v-for="(item, index) in courses" class="educate">
              {{ item.coursesName }}<span class="info">{{ item.time }}</span>
              <div
                class="edit-btn"
                type="text"
                @click="editFun('courses', item, index)"
              >
                <i class="edit-icon" /> 编辑
              </div>
            </div>
          </div>
          <Courses v-show="coursesFlag" ref="courses" />
        </section>
        <!-- 社会实践/活动经历 -->
        <section class="block pt30">
          <div class="title">
            社会实践/活动经历<span class="en">Social Practice</span>
            <div
              v-if="!practiceExperienceFlag && practiceExperience.length > 0"
              class="add-btn"
              @click="editFun('practiceExperience')"
            >
              + 添加社会实践/活动经历
            </div>
          </div>
          <div
            v-if="practiceExperience.length <= 0 && !practiceExperienceFlag"
            class="empty-btn"
            @click="editFun('practiceExperience')"
          >
            <el-row>
              <el-col> <i class="add-icon" />添加社会实践/活动经历 </el-col>
            </el-row>
          </div>
          <div
            v-for="(item, index) in practiceExperience"
            v-if="!practiceExperienceFlag"
            :key="index"
            class="job-wish-item"
          >
            <div class="row1">{{ item.practiceName }}</div>
            <div class="row4">
              <span class="value">{{ item.beginTime }}~{{ item.endTime }}</span>
            </div>
            <div
              v-if="item.practiceDescription"
              class="row4"
              v-html="item.practiceDescription.replace(/\n/gm, '<br>')"
            />
            <div
              class="edit-btn top0"
              type="text"
              @click="editFun('practiceExperience', item, index)"
            >
              <i class="edit-icon" /> 编辑
            </div>
          </div>
          <PracticeExperience
            v-show="practiceExperienceFlag"
            ref="practiceExperience"
          />
        </section>
      </el-form>
      <div class="btnRow">
        <div class="btns" @click="$emit('updateEnd')">取消</div>
        <div class="btns" @click="openReivew">预览简历</div>
        <div class="btns" @click="submitFun(false)">保存简历</div>
      </div>
    </section>
    <el-drawer
      title="简历预览"
      size="80%"
      :visible.sync="drawerDialog"
      direction="rtl"
      style="z-index: 99999"
      :append-to-body="true"
    >
      <ResumeReview ref="ResumeReview" :hide-edit="true" />
    </el-drawer>
  </div>
</template>
<script>
import { getAge } from '../../../utils/utils'
import {
  updateStudentCurriculumVitae,
  createStudentCurriculumVitae
} from '../../../api/school-admin-api/hireManage'
import { getStudentResume } from '@/api/school-admin-api/userManage/student/index.js'
import InternshipDesire from './components/internshipDesire.vue'
import EducationalExperience from './components/educationalExperience.vue'
import WorkExperience from './components/workExperience.vue'
import ProjectExperience from './components/projectExperience.vue'
import LanguageAbility from './components/languageAbility.vue'
import SpecialtyAbility from './components/specialtyAbility.vue'
import Certificates from './components/certificates.vue'
import Courses from './components/courses.vue'
import PracticeExperience from './components/practiceExperience.vue'
import ResumeReview from '@/components/resumeReview/index.vue'

export default {
  // 组件名称
  name: 'ResumeEdit',
  // 局部注册的组件
  components: {
    ResumeReview,
    InternshipDesire,
    EducationalExperience,
    WorkExperience,
    ProjectExperience,
    LanguageAbility,
    SpecialtyAbility,
    Certificates,
    Courses,
    PracticeExperience,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      drawerDialog: false,
      userInfo: {
        jobStatus: '',
        inJobTime: '',
        cardNo: '',
        authenticationBackPictureUrl: '',
        authenticationCardBackPictureUrl: '',
        authenticationCardFrontPictureUrl: '',
        authenticationFrontPictureUrl: '',
        email: '',
        mobile: '',
        nativePlace: '',
        sex: '',
      },
      internshipDesireFlag: false,
      educationalExperienceFlag: false,
      workExperienceFlag: false,
      projectExperienceFlag: false,
      languageAbilityFlag: false,
      specialtyAbilityFlag: false,
      certificatesFlag: false,
      coursesFlag: false,
      practiceExperienceFlag: false,
      internshipDesire: [], // 实习意向
      educationalExperience: [], // 教育经历列表
      workExperience: [], // 工作、实习经历列表
      projectExperience: [], // 项目经历列表
      languageAbility: [], // 语言能力列表
      specialtyAbility: [], // 专业技能列表
      certificates: [], // 证书列表
      courses: [], // 已修课程列表
      practiceExperience: [], // 实践经验
      name: '模板1',
      currentId: '',
      dataObj: {},
      currentCurriculumId: null,
      curriculumList: [],
    }
  },
  // 组件方法
  methods: {
    // 通过抽屉查看简历预览
    openReivew() {
      this.drawerDialog = true
      setTimeout(() => {
        const data = this.submitFun(true)
        this.$refs.ResumeReview.open(data || this.dataObj, this.userInfo)
      })
    },
    fetchJSON(str, key) {
      if (!str){
        this[key] = []
        return
      } 
      const arr = JSON.parse(str)
      if (arr.length <= 0) return []
      this[key] = arr
    },
    changeIndex(item){
      if(item.id == this.currentCurriculumId) return
      this.currentCurriculumId = item.id
      this.fetchData(item)
    },
    addFun(length){
      this.currentCurriculumId = null
      this.curriculumList = this.curriculumList.concat({})
      this.name = `模板${length + 1}`
      this.fetchData({})
    },
    fetchData(data){
      this.dataObj = data
      if(JSON.stringify(data) != "{}"){
        data.age = getAge(data.birthday) + '岁'
        data.nickname = data.studentName
        Object.assign(this.userInfo, data)
        this.name = data.name || '模板1'
      }
      this.fetchJSON(data.internshipDesire, 'internshipDesire')
      this.educationalExperience = data.educationalExperience || []
      this.fetchJSON(data.workExperience, 'workExperience')
      this.fetchJSON(data.projectExperience, 'projectExperience')
      this.fetchJSON(data.languageAbility, 'languageAbility')
      this.fetchJSON(data.specialtyAbility, 'specialtyAbility')
      this.fetchJSON(data.certificates, 'certificates')
      this.fetchJSON(data.courses, 'courses')
      this.fetchJSON(data.practiceExperience, 'practiceExperience')
    },
    init(studentId, currentCurriculumId) {
      Object.assign(this, this.$options.data())
      this.currentId = studentId
      getStudentResume({ studentId }).then((res) => {
        if (res.data && res.data.studentCurriculumVitaeRespVOList.length > 0) {
          
          for (const key in res.data) {
            if (Object.hasOwnProperty.call(this.userInfo, key)) {
              this.userInfo[key] = res.data[key]
            }
          }
          let data = res.data.studentCurriculumVitaeRespVOList.filter(v=>v.id==currentCurriculumId)[0]
          this.currentCurriculumId = currentCurriculumId;
          this.curriculumList = res.data.studentCurriculumVitaeRespVOList;
          this.fetchData(data)
        }
      })
    },
    handleOpen(dialogName) {
      this[dialogName] = true
    },
    // 点击模块编辑，切换状态
    editModule(key) {
      this[key] = true
    },
    editFun(key, item = {}, index = null) {
      this[`${key}Flag`] = true
      if (JSON.stringify(index) != 'null') {
        this.$refs[key].init(item, index)
      }
    },
    closeFun(key) {
      this[`${key}Flag`] = false
    },
    deleteFun(key, index) {
      console.log(index, 'deleteFun')
      this[key].splice(index, 1)
    },
    upDate(key, data, index = null) {
      JSON.stringify(index) != 'null'
        ? (this[key][index] = data)
        : this[key].push(data)
    },
    /**
     * 提交数据 / 预览数据
     * @param {Boolean} review 是否为预览模式 true 拿到预览的数据 fasle 提交
     */
    submitFun(review = false) {
      const {
        internshipDesire, // 实习意向
        educationalExperience, // 教育经历列表
        workExperience, // 工作、实习经历列表
        projectExperience, // 项目经历列表
        languageAbility, // 语言能力列表
        specialtyAbility, // 专业技能列表
        certificates, // 证书列表
        courses, // 已修课程列表
        practiceExperience, // 实践经验
        name,
      } = this
      if (!name) {
        this.$message.error('请填写简历名称')
        return
      }
      if (internshipDesire.length <= 0) {
        this.$message.error('请至少填写一项实习意向')
        return
      }
      if (educationalExperience.length <= 0) {
        this.$message.error('请至少填写一项教育经历')
        return
      }
      const {
        birthday,
        id,
        clan,
        email,
        liveCity,
        nickname,
        nativePlace,
        political,
        sex,
        studentId,
        studentPictureUrl,
        graduateTime,
        phoneNumber
      } = this.userInfo
      const params = {
        birthday,
        clan,
        email,
        liveCity,
        nickname,
        nativePlace,
        political,
        sex,
        studentPictureUrl,
        graduateTime,
        studentId,
        // id,
        name,
        studentName: nickname,
        publicStatus: '0',
        phoneNumber: phoneNumber,
        identify: 'student',
        internshipDesire: JSON.stringify(internshipDesire),
        educationalExperience: educationalExperience,
        workExperience: JSON.stringify(workExperience),
        projectExperience: JSON.stringify(projectExperience),
        languageAbility: JSON.stringify(languageAbility),
        specialtyAbility: JSON.stringify(specialtyAbility),
        certificates: JSON.stringify(certificates),
        courses: JSON.stringify(courses),
        practiceExperience: JSON.stringify(practiceExperience)
      }
      if (review) {
        return params
      }
      if(this.currentCurriculumId){
        params.id = this.currentCurriculumId
        updateStudentCurriculumVitae(params).then((res) => {
          if (res.data) {
            // 9489
            this.$message({
              message: '保存简历成功',
              type: 'success'
            })
            this.$emit('updateEnd')
          } else {
            this.$message.error(res.msg)
          }
        })
      }else{
        createStudentCurriculumVitae(params).then((res) => {
          if (res.data) {
            // 9489
            this.$message({
              message: '保存简历成功',
              type: 'success'
            })
            this.$emit('updateEnd')
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.resume-review {
  position: relative;
  width: 100%;
  background: #fff;
  // padding-bottom: 120px;
  .btnRow {
    width: 100%;
    // position: fixed;
    // left: 0;
    // bottom: 40px;
    display: flex;
    justify-content: center;
    height: 60px;
    z-index: 4;
    .btns {
      width: 260px;
      height: 52px;
      background: #4677b9;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 28px;
      cursor: pointer;
      margin: 0 30px;
    }
  }
  .block {
    position: relative;
    background: #f9f9f9;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
  }
  .pt30 {
    padding: 20px;
  }
  .top0 {
    top: 0 !important;
    transform: translateY(0) !important;
  }
  .mb10 {
    margin-bottom: 10px;
  }
  .contact {
    .row1 {
      display: inline-block;
      text-align: left;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 21px;
      margin: 12px 0;
      span {
        margin: 10px;
      }
    }
  }
  .user-info {
    text-align: center;
    .touxiang {
      display: block;
      width: 90px;
      height: 90px;
      margin: 0 auto 12px;
    }
    .row1 {
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 33px;
      margin-bottom: 10px;
    }
    .row2 {
      position: relative;
      display: inline-block;
      text-align: center;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 21px;
      .line {
        position: relative;
        display: inline-block;
        width: 1px;
        height: 10px;
        background: #9597a0;
        margin: 0 13px;
      }
    }
  }
  .title {
    position: relative;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 25px;
    padding: 0;
    margin-bottom: 20px;
    .isRequire {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fe4e3d;
      line-height: 20px;
      margin-left: 12px;
    }
    .en {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
      margin-left: 15px;
    }
  }
  .edit-btn {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2f8efe;
    line-height: 21px;
    height: 21px;
    cursor: pointer;
    .edit-icon {
      display: inline-block;
      width: 15px;
      height: 16px;
      background: url("../../../assets/images/edit_icon.png") no-repeat center
        center / cover;
      vertical-align: middle;
    }
  }
  .add-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2f8efe;
    line-height: 27px;
    height: 27px;
    cursor: pointer;
    background: #3d6cb0;
    border-radius: 36px;
    color: #fff;
    padding: 0 15px;
  }
  .empty-btn {
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2f8efe;
    line-height: 22px;
    text-align: center;
    .add-icon {
      display: inline-block;
      width: 14px;
      height: 14px;
      background: url("../../../assets/images/add_icon.png") no-repeat center
        center / cover;
      margin-right: 15px;
    }
  }
  ::v-deep .delete-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url("../../../assets/images/delete_icon.png") no-repeat center
      center / cover;
  }
  ::v-deep .el-button {
    width: 100px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    text-align: center;
    background: #ffffff;
    border-radius: 3px;
    border: 1px solid #4677b9;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #4677b9;
  }
  ::v-deep .el-button--primary {
    color: #ffffff;
  }
  ::v-deep .el-form-item__label {
    line-height: 16px;
  }
  ::v-deep .left-label {
    .cn-label {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 30px;
      margin-bottom: 2px;
    }
    .en-label {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
    }
  }
  .job-wish-item {
    position: relative;
    .row1 {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 33px;
      margin-bottom: 15px;
      .line {
        position: relative;
        display: inline-block;
        width: 1px;
        height: 17px;
        background: #9597a0;
        margin: 0 25px;
      }
    }
    .row4 {
      margin-bottom: 10px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 30px;
      word-break: break-all;
      .label {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 28px;
        margin-right: 17px;
      }
      .value {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #030303;
        line-height: 28px;
        margin-right: 130px;
      }
    }
  }
  .word-record-item {
    position: relative;
    margin-bottom: 30px;
    .educate {
      position: relative;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      padding-right: 100px;
      font-weight: 400;
      color: #37383d;
      line-height: 36px;
      padding-bottom: 27px;
      border-bottom: 1px solid #d4d6da;
      margin-bottom: 15px;
      &:last-child {
        border-bottom: 1px solid red;
        padding-bottom: 0;
      }
      .info {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 36px;
        margin-left: 35px;
      }

      &:last-child {
        border-bottom: 1px solid #f9f9f9;
        margin-bottom: 0;
      }
    }
    .row1 {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 28px;
      margin-bottom: 15px;
    }
    .row2 {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 33px;
      margin-bottom: 15px;
      span {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #9597a0;
        line-height: 33px;
        margin-left: 218px;
      }
    }
    .row3 {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 28px;
      margin-bottom: 15px;
      .line {
        position: relative;
        display: inline-block;
        width: 1px;
        height: 17px;
        background: #9597a0;
        margin: 0 25px;
      }
    }
    .row4 {
      margin-bottom: 20px;
      .label {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 28px;
        margin-right: 17px;
      }
      .value {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #030303;
        line-height: 28px;
        margin-right: 130px;
      }
    }
  }
}

.changeRow{
    width: 100%;
    background: #f9f9f9;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
    padding: 17px 14px 0;
    display: flex;
    .items{
      width: 180px;
      height: 58px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 30px;
      font-size: 18px;
      margin-right: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597A0;
      border-radius: 6px 6px 0px 0px;
      cursor: pointer;
      transition-duration: .3s;
      position: relative;
      span{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .el-icon-edit{
        color: #3D6CB0;
        position: absolute;
        right: 10px;
        cursor: pointer;
        display: none;
        top: 50%;
        transform: translateY(-50%);
      }
      &:hover{
        background: #fff;
      }
      &.active{
        background: #fff;
        color: #3D6CB0;
        .el-icon-edit{
          display: inline;
        }
      }
      &.adds{
        background: transparent !important;
      }
    }
  }
::v-deep .el-breadcrumb__inner {
  font-size: 18px;
}
::v-deep .el-button--primary {
  background: #4677b9 !important;
  border: none;
}
</style>
